<div class="box box-skin main-content">
	<div class="box-body no-padding">
	    <div class="treetable-toolbar" id="toolbar">
			<div class="form-inline" role="form">
		    	<div class="form-group btn-group">
					<button type="button" class="btn btn-default btn-flat" onclick="CRUDBookCatFunc(1);" title="添加"><i class="fa fa-plus"></i></button>
					<button type="button" class="btn btn-default btn-flat" onclick="reloadFunc();" title="重新加载"><i class="fa fa-refresh"></i></button>
				</div>
				<div class="form-group btn-group">
					<button type="button" class="btn btn-default btn-flat" onclick="expandAll();" title="全部展开"><i class="fa fa-expand"></i></button>
					<button type="button" class="btn btn-default btn-flat" onclick="collapseAll();" title="全部折叠"><i class="fa fa-compress"></i></button>
				</div>
				<div class="form-group btn-group">
					<button type="button" class="btn btn-default btn-flat" onclick="batRefreashBookCatFunc();" title="批量刷新"><i class="fa fa-history"></i></button>
				</div>
            </div>
	    </div>
		<table class="table table-hover treetable"></table>
	</div>
</div>

<link rel="stylesheet" href="__TMPL__Public/assets/plugins/colorpicker/bootstrap-colorpicker.min.css">
<script type="text/javascript" src="__TMPL__Public/pages/book/book_cat.js"></script>
<script type="text/javascript" src="__TMPL__Public/assets/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script type="text/javascript">
var xtt;
$(function() {
	var columns = [{
        title: '名称',
        field: 'name',
    }, {
        title: 'ID',
        field: 'id',
    }, {
        title: 'PID',
        field: 'pid',
    }, {
        title: '访问链接',
        field: 'url',
        formatter: function(value, row, index) {
        	return value != '' ? value : '<span class="text-gray">无</span>';
		},
    }, {
        title: '简介',
        field: 'description',
        formatter: function(value, row, index) {
        	return value != '' ? value : '<span class="text-gray">无</span>';
		},
    }, {
        title: '背景颜色',
        field: 'ext_info',
        formatter: function(value, row, index) {
        	return value != '' ? '<i class="fa fa-square" style="color:' + value + ';"></i>' : '<span class="text-gray">未设置</span>';
		},
    }, {
        title: '操作',
        field: 'operate',
        formatter: function(value, row, index) {
			var str = '';
			str += '<div class="btn-group">';
			str += '<button type="button" class="btn btn-default btn-flat btn-xs" onclick="CRUDBookCatFunc(2, ' + row.id + ');">查看</button>';
			str += '<button type="button" class="btn btn-default btn-flat btn-xs" onclick="CRUDBookCatFunc(3, ' + row.id + ', ' + index + ');">编辑</button>';
			str += '<button type="button" class="btn btn-default btn-flat btn-xs" onclick="CRUDBookCatFunc(4, ' + row.id + ');">删除</button>';
			str += '</div>';
			return str;
		},
    }];

	xtt = xtreetable('.treetable', {
		url: "{:U('Book/BookCat/getAll')}",
		columns: columns,
		ajaxDataFilter: function(data) {
			return data.obj;
        },
	});
});

/* reload */
function reloadFunc() {
	xtt.refresh();
}

/* expandAll & collapseAll */
function expandAll() {
	xtt.expandAll();
}
function collapseAll() {
	xtt.collapseAll();
}
</script>
